<script setup>
import { ref } from 'vue'
import { RouterLink } from 'vue-router'
import SiteNotice from '../components/SiteNotice.vue'
import enemydata from '../data/EnemyData.json'
import campdata from '../data/CampData.json'
import { getText } from '../store/txtstore.js'

let enemies = []
for (const [uid, data] of Object.entries(enemydata.data)) {
    if (data[59] != undefined || (uid > 7000 && uid < 8000)) {
        enemies.push({
            uid: uid,
            camp: data[4],
            name: getText(data[19][1]),
            group: data[25],
            large: data[47]
        })
    }
}
enemies.sort(sortEnemy)

const category = ref(0)
const campIds = Object.keys(campdata.data)
const camps = ref(Object.fromEntries(campIds.map(key => [key, false])))
const large = ref(false)

function sortEnemy(a, b) {
    if (a.group != b.group) {
        return a.group - b.group
    }
    return a.uid - b.uid
}

function filterCategory(uid, camp) {
    if (uid < 3000 && camp == 1099) {
        return category.value == 1
    }
    if (uid > 7000 && uid < 8000) {
        return category.value == 2
    }
    return category.value == 0
}

function filter(camp, isLarge) {
    const campMatch = camps.value[camp] || Object.values(camps.value).every(c => !c)
    return campMatch && !(large.value ^ isLarge)
}

function selectAll() {
    for (const campId of campIds) {
        camps.value[campId] = false
    }
}
</script>

<template>
    <SiteNotice />
    <article>
        <form>
            <fieldset>
                <legend>类型</legend>
                <label><input type="radio" v-model="category" value="0">普通</label>
                <label><input type="radio" v-model="category" value="1">军备解析人形</label>
                <label><input type="radio" v-model="category" value="2">物体</label>
            </fieldset>
            <fieldset>
                <legend>阵营</legend>
                <button @click="selectAll">全选</button>&nbsp;
                <label v-for="campId of campIds">
                    <input type="checkbox" v-model="camps[campId]">{{ getText(campdata.data[campId][2][1]) }}
                </label>
            </fieldset>
            <fieldset>
                <legend>体型</legend>
                <label><input type="radio" v-model="large" :value="false">普通</label>
                <label><input type="radio" v-model="large" :value="true">大型</label>
            </fieldset>
        </form>
        <table>
            <tr>
                <th>敌方单位ID</th>
                <th>敌方单位名</th>
                <th>阵营</th>
            </tr>
            <tr v-for="enemy of enemies" v-show="filterCategory(enemy.uid, enemy.camp) && filter(enemy.camp, enemy.large)">
                <td>{{ enemy.uid }}</td>
                <td>
                    <RouterLink :to="`/enemy/${enemy.uid}`">{{ enemy.name }}</RouterLink>
                </td>
                <td>{{ getText(campdata.data[enemy.camp][2][1]) }}</td>
            </tr>
        </table>
    </article>
</template>

<style scoped>
nav {
    position: absolute;
}

label {
  margin: 0 0.25em;
}

input {
    margin-right: 2px;
}

table {
    border-spacing: 4px 0;
}

th {
    font-weight: bold;
}

td {
    text-align: center;
}

tr>*:first-child {
    text-align: right;
}

tr>*:last-child {
    text-align: left;
}
</style>